<template>
  <div class="category">
    <div class="wrap">
      <div>
        <img
          src="https://res.vmallres.com/cmscdn/CN/2022-09/b6827f02b66d4ca28c9d9167eac0df00.png.webp"
          alt=""
        />
        <span>智慧办公</span>
      </div>
      <div>
        <img
          src="https://res.vmallres.com/uomcdn/CN/cms/202201/FED4FA21CCED53EE303E43FC98DB4422.png.webp"
          alt=""
        />
        <span>智能家居</span>
      </div>
      <div>
        <img
          src="https://res.vmallres.com/cmscdn/CN/2022-09/cb2ad294b69b4e1282d62425e18750e2.png.webp"
          alt=""
        />
        <span>AITO汽车</span>
      </div>
      <div>
        <img
          src="https://res.vmallres.com/uomcdn/CN/cms/202207/97E36F976BD21EDFCDFAABCE20262F5E.png.webp"
          alt=""
        />
        <span>影音娱乐</span>
      </div>
      <div>
        <img
          src="https://res.vmallres.com/cmscdn/CN/2022-09/d951b6bb25554c2bbdee925c0119e124.png.webp"
          alt=""
        />
        <span>运动健康</span>
      </div>
      <div>
        <img
          src="https://res.vmallres.com/uomcdn/CN/cms/202104/D772246BE15940855B040BF640B87809.webp"
          alt=""
        />
        <span>会员频道</span>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: 'XCategory'
}
</script>

<style lang="less" scoped>
.category {
  background-color: #f1f3f5;
  .wrap {
    padding: 20px;
    width: 1200px;
    height: 95px;
    margin: 0 auto;
    display: flex;
    div {
      width: 200px;
      height: 95px;
      display: flex;
      flex-flow: column;
      justify-content: center;
      align-items: center;
      img {
        display: block;
        width: 48px;
        height: 48px;
      }
      span {
        display: block;
        font-size: 14px;
      }
    }
  }
}
</style>
